<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可输入select框和file框</title>
<meta content="" name="description">
<script type="text/javascript" src="/j-tool/jquery.js"></script>
<script>
</script>
<style>
#sel{position:relative;width:220px;margin:0 auto;top: 25px;}
.sel-box-value{border:1px solid gray;float:left;padding-left: 5px;width: 210px;overflow:hidden;position:absolute;}
#sele-text{width:182px;height: 24px;line-height: 24px;border:0;padding:0;float:left;font-size:12px;}
.sel-box-btn{border-left:1px solid gray;width:27px;height: 24px;line-height: 24px;font-size:12px;float:left;text-indent:1000px;overflow:hidden;background:#EBEBEB;}
#sel ul{border:0;margin:0;padding:0;position:absolute;border:1px solid gray;width:215px;top: 25px;}
#sel ul li{font-size:12px;list-style:none;height:22px;line-height:22px;padding-left: 5px;margin:1px 0;background:white;}
#sel .on{background:#EBEBEB;color:green;}

.file-value{height:23px;width: 216px;_width: 227px}
.file-path{position:absolute;left: 0;height: 17px;_height: 18px;line-height: 17px;}
.file-box{width: 220px;margin:0 auto;position:relative;}

.input_text{width:200px;height:16px;line-height:16px;position:absolute;}
.input_file{width:300px;height:22px;line-height:22px;margin-left:-300px;background:white;filter:alpha(opacity=0); opacity:0;}
.file-box-2 span{border:1px solid gray;font-size:12px;float:left;height:20px;line-height:20px;background:#EBEBEB;width:50px;}

</style>
<body>
	<div style="margin-top: 150px;">
		<div class="file-box">
			<input type="file" name="photo" class="file-value"/>
			<input type="text" name="photopath" class="file-path"/>
		</div>
	
		<div id="sel">
			<div class="sel-box-value"><input type="text" name="sele-text" id="sele-text"><span class="sel-box-btn">搜索</span></div>
			<ul>
				<li data="0">儿歌</li>
				<li data="1">故事</li>
				<li data="2">音乐</li>
				<li data="3">其他</li>
			</ul>
		</div>
	</div>
	<div>
		<div class="file-box-2">
			<input class="input_text" type="text" id="txt" name="txt" /><span>&nbsp;浏览...</span>		
			<input class="input_file" size="30" type="file" onchange="txt.value=this.value"/>
		</div>
	</div>
</body>
<script>
	$('#sel > ul > li').hover(function(){$(this).addClass('on');},function(){$(this).removeClass('on');})
	$('#sel > ul > li').click(function(){
		var data = $(this).attr('data');
		var txt = $(this).text().replace(/(^\s*)|(\s*$)/g, "");;
		$('#sele-text').val(txt);
		$(this).parents('ul').slideToggle(300);
	});

	$('.sel-box-btn').click(function(){
		if(!$('ul').is(':animated'))
		{
			$('#sel > ul').slideToggle(300);
		}		
	});

	if(window.google && window.chrome)//判断谷歌浏览器
	{
		$('.file-path').css({'left':66,'height':16});
	}
</script>
</html>